<template>
	<view class="">
		<view class="content">
			<QSTabsWxs ref="QSTabsWxs" activeFontColor="#4E4E4E" 
			hasRefresh
			tabsFontColor="rgba(0,0,0,.7)" tabsBackgroundColor="#fff"
			 swiperBackgroundColor="#fff"  lineColor="#007AFF" 
			 :lineWidth=".5" type="status" :height="windowHeight-topViewHeight" 
			 minWidth="200rpx" space="3px" tabHeight="35px"></QSTabsWxs>
		</view>
	</view>
</template>

<script>
	import QSTabsWxs from '@/components/QS-tabs-wxs-list/QS-tabs-wxs-list.vue';
	const {
		windowHeight,windowWidth
	} = uni.getSystemInfoSync();
	export default {
		components: {
			QSTabsWxs
		},
		data() {
			return {
				title: 'Hello',
				topViewHeight: 0,
				windowHeight,
				windowWidth: windowWidth/4 +'rpx',
				
			}
		},
		onReady() {
			console.log(windowWidth);
			const tabs = [{
					name: '全部信息',
					id: 'StatusInfo0'
				},
				{
					name: '待审核',
					id: 'StatusInfo01'
				},
				{
					name: '已通过',
					id: 'StatusInfo02'
				},
				
				{
					name: '未通过',
					id: 'StatusInfo03'
				}
			]
			this.getTopViewHeight();
			this.$refs.QSTabsWxs.setTabs(tabs);
		},
		methods: {
			getTopViewHeight() {
				let view = uni.createSelectorQuery().in(this);
				view.select('.topView').boundingClientRect();
				view.exec(res => {
					console.log('总高度:' + JSON.stringify(res));
					// this.topViewHeight = res[0].height;
				})
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
	}

	.topView {
		height: 44px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 18px;
		background: #000;
		color: #fff;
		padding: var(--status-bar-height) 20px 0 20px;
	}

	.topViewItem {
		font-size: 16px;
		color: #999;
		width: 15%;
	}
	
</style>
